<template>
    <div style="overflow: hidden">
        <IndexTop></IndexTop>
        <IndexHeader></IndexHeader>
        <div style="width: 1200px;margin: 0 auto;">
            <div style="border-bottom: 3px solid #DA030A;font-size: 20px">
                我的订单
            </div>
            <div style="display: flex;justify-content: space-around">
                <span>旅游社</span>
                <span>信息</span>
                <span>单价</span>
            </div>
          <div v-for="item in 2">
              <div>
                  旅游团：有点甜甜旅游社
              </div>
              <div style="display: flex;justify-content: space-around;height: 50px;align-items: center">
                  <span>法国+瑞士+意大利+德国10-12日游</span>
                  <span style="text-align: center">欧洲年度爆款超3400人出游</span>
                  <span style="text-align: center;margin-right: 70px;">￥752</span>
              </div>
          </div>
            <br>
            <br>
            <br>
            <br>
            <div style="height: 80px;background-color: #F7F7F7;border-bottom: 3px solid #DA030A ">
                <span style="float: right;line-height: 80px;margin-right: 29px">总计:￥752</span>
            </div>
            <div style="display: flex;align-items: center;height: 70px;background-color: #F7F7F7">
                <div @click="dialogVisible=true" class="jiesuan"
                     style="color:#EC4141 ;margin-left: 1100px;line-height: 20px;padding: 2px 6px;border: 1px solid #EC4141;width: 40px;height: 20px;text-align: center">
                    结算
                </div>
            </div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <Foot></Foot>
        <el-dialog
                title="付款"
                :visible.sync="dialogVisible"
                width="30%"
        >
            <img  v-if="weixin" style="width: 200px;height: 200px" src="../assets/img/微信.png" alt="">
            <img  v-if="zhifubao" style="width: 200px;height: 200px" src="../assets/img/支付宝.png" alt="">
            <span> 需付款：￥752</span>
            <el-input v-model="money" style="width: 40%"></el-input>
            <span slot="footer" class="dialog-footer">
                                <el-button >支付</el-button>

                <el-button @click="change1">支付宝</el-button>
                <el-button  @click="change2">微信</el-button>

<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import IndexTop from "../components/top/IndexTop";
    import IndexHeader from "../components/top/IndexHeader";
    import Foot from "../components/bottom/Foot";

    export default {
        name: "Success",
        components: {
            Foot,
            IndexHeader,
            IndexTop,
        },
        methods:{
            change1(){
                this.weixin=false;
                this.zhifubao=true
            },
            change2(){
                this.weixin=true;
                this.zhifubao=false
            }
        },
        data() {
            return {
                dialogVisible: false,
                weixin: true,
                zhifubao: false,
                money:0
            }
        }
    }
</script>

<style scoped>
    .jiesuan {
        transition: all 0.5s;
        cursor: pointer;
    }

    .jiesuan:hover {
        background-color: #EC4141;
        color: #ffffff !important;
    }
</style>